<template>
<div class="ml-2em">
  <h1>前端枚举的实现:</h1>
  <div class="is-flex el-row--flex">
    <el-select v-model="gender" clearable>
      <el-option v-for="(item,index) in GenderEnum.allEnums()" :key="index" :value="item.value" :label="item.label" />
    </el-select>
    <p class="ml-2em">
      <span>选中的值：value = </span>
      <span style="color: red">{{gender}}</span>
      <span class="ml-2em">label = </span>
      <span class="el-button--text">{{ GenderEnum.getEnumByValue(gender).label }}</span>
    </p>
  </div>
</div>
</template>

<script>
import GenderEnum from "@/enums/GenderEnum";
export default {
  name: "index",
  data(){
    return {
      gender: null,
      GenderEnum
    }
  }
}
</script>

<style scoped>

</style>
